<template>
  <view class="page">
    <view
      class="page-head"
      :style="{ backgroundColor: pageHeadStyle.backgroundColor }"
    >
      <statusBar></statusBar>
      <view style="display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;">
          <image src="/static/images/logo.png" style="width: 138rpx;height: 40rpx;margin-left: 20rpx;"></image>
          <view></view>
          <view></view>
      </view>
      
    </view>
    <!-- -->
    <view
      class="head-polyfill"
      :style="{ height: statusBarHeight + 38 + 'px',backgroundColor:'#252e43'}"
    ></view>

    <view class="body">
		<view class="search-box" :style="{ top: statusBarHeight + 38 + 'px' }">
		  <input-search
		    @click="onFocus"
		    :disabled="true"
		    placeholder="搜索课程、分类"
		  ></input-search>
		</view>
      <swiper class="swiper" :autoplay="true" :circular="true" :interval="4000">
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="onClickBanner(item, index)"
        >
          <view
            class="swiper-box"
            :style="{ backgroundImage: `url(${item.image})` }"
          >
          </view>
        </swiper-item>
      </swiper>

      <view class="girds">
        <view
          class="gird-item"
          v-for="(gird, girdIndex) in girds"
          :key="gird.id"
          @click="onClickGird(gird, girdIndex)"
        >
          <view class="icon">
            <image :src="gird.icon" mode="widthFix" class="image" />
          </view>
          <view class="name"> {{ gird.name }} </view>
        </view>
      </view>

      <view class="card">
        <view class="head">
          <view class="bd">
            <image
              :src="imgBaseUrlV2 + 'xueyuan_fire.png'"
              mode="widthFix"
              class="icon"
            />
            热门推荐
          </view>

          <view class="ft" @click="onClickHotAll">
            全部
            <image
              :src="imgBaseUrlV2 + 'arrow.png'"
              mode="widthFix"
              class="icon"
            />
          </view>
        </view>

        <view class="hot">
          <scroll-view :scroll-x="true">
            <view
              class="hot-item"
              v-for="(item, index) in recommentList"
              :key="item.id"
              @click="onClickHot(item, index)"
            >
              <article-item
                :thumb="item.cover_img_url"
                :title="item.title"
                :read="item.read_num"
                :type="item.type"
                :index="index"
                :key="item.id"
                class="v-input"
              ></article-item>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="card">
        <view class="head">
          <view class="bd">
            <image
              :src="imgBaseUrlV2 + 'weibao.png'"
              mode="widthFix"
              class="icon"
            />
            在线维保手册
          </view>

          <view class="ft" @click="onToList(9)">
            全部
            <image
              :src="imgBaseUrlV2 + 'arrow.png'"
              mode="widthFix"
              class="icon"
            />
          </view>
        </view>

        <view class="manual">
          <view
            class="item"
            v-for="(item, index) in maintenanceList"
            :key="item.id"
            @click="onClickManual(item, index)"
          >
            <article-item
              mode="other"
              :read="item.read_num"
              :type="item.type"
              :thumb="item.cover_img_url"
              :title="item.title"
              :tags="item.tags"
              :border="true"
              class="v-input"
            >
            </article-item>
          </view>
        </view>
      </view>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import { delayFunc } from "@/common/util";

import viewModule from "@/common/mixins/view-module";
import { mapState } from "vuex";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import {
  getCollegeTag,
  getCollegeCourseArticleList,
} from "@/common/api/college";
import inputSearch from "@/components/public/input/search";
import articleItem from "@/components/public/item/article";
import qs from "qs";
import statusBar from "@/components/public/status-bar/status-bar";
const system = uni.getSystemInfoSync();
let statusBarHeight = system.statusBarHeight;
// #ifdef MP-WEIXIN
let custom = uni.getMenuButtonBoundingClientRect();
statusBarHeight = custom.top;
// #endif
export default {
  mixins: [viewModule],
  components: { inputSearch, articleItem, statusBar },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      imgBaseUrl,
      imgBaseUrlV2,
      statusBarHeight,
      pageHeadStyle: "",
      dataList: [],
      recommentList: [],
      maintenanceList: [],
      girds: [],
      mixinViewOptions: {
        getURL: "/getBanner",
        isPage: false,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: false,
      },
      dataForm: {
        type: 2,
      },
    };
  },
  methods: {
    fetchComplete(err, data = [], res = {}) {
      console.log(arguments, "ar");
      if (err) {
        this.message.error(res.message || "获取数据失败!");
      }

      return data.map((i) => {
        return {
          ...i,
          image: i.img_url
        };
      });
    },
    onChangePage() {},
    onToList(id) {
      this.$Router.push({
        path: "/pages/college/article/list",
        query: { id, item: { id } },
      });
    },
    onClickBanner(item, index) {
      if (item.video_url) {
        this.$Router.push({
          path: "/pages/video-play/video-play",
          query: {
            path: item.video_url,
          },
        });
      } else {
      }
    },
    onClickHot(item, index) {
      this.$Router.push({
        path: "/pages/college/course/index",
        query: {
          ...item,
          title: "热门推荐详情",
        },
      });
    },
    onClickGird(item, index) {
      let url = item.url;
      if (!url) {
        return;
      }
      let parse = {};
      if (url.indexOf("?") !== -1) {
        parse = url.substring(url.indexOf("?") + 1, url.length);
        url = url.substring(0, url.indexOf("?"));
        parse = qs.parse(parse);
      }
      this.$Router.push({
        path: url,
        query: {
          item: encodeURIComponent(JSON.stringify(item)),
          ...parse,
        },
      });
    },
    onClickManual(item, index) {
      this.$Router.push({
        path: "/pages/college/course/index",
        query: {
          ...item,
          title: "在线维保手册",
        },
      });
    },
    onClickHotAll() {
      this.$Router.push({
        path: "/pages/college/hot",
      });
    },
    onFocus(e) {
      this.$Router.push({
        path: "/pages/college/search",
      });
    },
    initData() {
      return Promise.all([
        this.getDataList(),
        this.getCollegeTag(),
        this.getCollegeCourseArticleList(),
        this.getCollegeCourseArticleList2(),
      ])
        .then((res) => {
          uni.$emit("hideLoading");
        })
        .catch((err) => {
          uni.$emit("hideLoading");
        });
    },
    getCollegeTag() {
      return getCollegeTag({
        sort: "desc",
        limit: 9,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取分类列表失败!");
          }
          let data = res.data.data || [];
          data.push({
            id: "",
            icon: imgBaseUrlV2 + "xueyuan_more.png?v=1",
            name: "更多",
            url: "/pages/college/more",
          });
          data.forEach((i) => {});
          this.girds = data;
        })
        .catch((err) => {});
    },
    getCollegeCourseArticleList(params = {}) {
      return getCollegeCourseArticleList({
        sort: "desc",
        is_hot: 1,
        ...params,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取列表失败!");
          }
          let data = res.data.data || [];
          this.recommentList = data;
        })
        .catch((err) => {});
    },
    getCollegeCourseArticleList2(
      params = {
        class_tag: 9,
      }
    ) {
      return getCollegeCourseArticleList({
        sort: "desc",
        ...params,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取列表失败!");
          }
          let data = res.data.data || [];
          data.forEach((i) => {
            i.tags = [];
            if (i.course_info) {
              let tag = i.course_info.tag || "";
              let tagArr = tag.split(",");
              i.tags = tagArr.map((i) =>
                this.$getDictLabel("repositoryArticleTag", i)
              );
            }
          });
          this.maintenanceList = data;
        })
        .catch((err) => {});
    },
    async pullDownRefresh() {
      await this.initData();
      uni.$emit("stopPullDownRefresh");
    },
  },
  created() {},
  mounted() {
    this.initData();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top) - 0);
  background-color: #fff;
  overflow: hidden;
}

.page-head {
  position: fixed;
  z-index: 998;
  width: 100%;
  line-height: 76rpx;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  transition: all 0.3s;
  color: #fff;
  background: #252E43;
  padding-bottom: 0rpx;
  /* #ifdef H5 */
  padding-top: 12rpx;
  /* #endif */
  box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.12);
}

.search-box {
  z-index: 3;
  width: 100%;
  padding: 12rpx 0 12rpx;
  background:#0D1523;
  font-weight: 400;
  text-align: left;
  position:fixed;
  font-family: PingFangSC-Regular, PingFang SC;
}

.body {
  position: relative;
  padding-bottom: 100rpx;
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  .swiper {
    height: 280rpx;
	margin-top: 96rpx;
    .swiper-item {
      padding: 0 24rpx;
      box-sizing: border-box;

      .swiper-box {
        height: 280rpx;
        background-size: cover;
        border-radius: 4rpx;
      }
    }
  }

  .girds {
    display: flex;
    flex-wrap: wrap;
    padding: 0 22rpx;
    align-content: flex-start;
    align-items: center;
    justify-content: space-between;
    margin: 28rpx 0 30rpx;

    .gird-item {
      flex: 0 0 4em;
      margin: 0 18rpx;
      font-size: 28rpx;
      margin-top: 7rpx;

      &:nth-child(5n) {
        margin-right: 0;
      }

      &:nth-child(5n-4) {
        margin-left: 0;
      }

      .icon {
        .image {
          display: block;
          width: 80rpx;
          margin: auto;
		  border-radius:50%;
        }
      }

      >.name {
        no-wrap();
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        text-align: center;
        color: color-white;
        white-space: nowrap;
        line-height: 42rpx;
        padding: 7rpx 0;
      }
    }
  }

  .card {
    border-top: 10rpx solid #3F5270;
    padding: 48rpx 0;

    >.head {
      display: flex;
      padding: 0 24rpx;
      margin-bottom: 36rpx;

      >.bd {
        display: flex;
        flex: 1;
        color: color-white;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        align-items: center;
        line-height: 1;

        >.icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }

      >.ft {
        display: flex;
        flex: 0 0 auto;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-white;
        line-height: 1;
        align-items: center;
        font-size: 28rpx;

        >.icon {
          display: block;
          width: 32rpx;
          margin-left: 6rpx;
        }
      }
    }
  }

  .hot {
    flex-wrap: nowrap;
    white-space: nowrap;

    .hot-item {
      display: inline-block;
      margin-left: 24rpx;
      width: 340rpx;
      height: 370rpx;
      flex: 0 0 340rpx;
      background-color: #3F5270;
      vertical-align: top;
      border-radius: 4rpx;
      overflow: hidden;

      &:last-child {
        margin-right: 24rpx;
      }

      >.icon {
        background-size: cover;
        height: 196rpx;
      }

      >.hot-body {
        display: block;
        width: 100%;
        white-space: normal;
        background-color: #eee;
        padding: 0 20rpx;

        >.name {
          no-wraps(2);
          width: 100%;
          font-size: 28rpx;
          line-height: 44rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4A4A4A;
          text-align: justify;
          padding-top: 12rpx;
        }

        >.desc {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: color-desc;
          margin-top: 10rpx;

          >.btn {
            float: right;
            height: 40rpx;
            line-height: 36rpx;
            font-size: 24rpx;
            padding: 0 14rpx;
            border-radius: 24rpx;
          }
        }
      }
    }
  }

  .manual {
    >.item {
      display: flex;
      padding: 0 24rpx;
    }
  }
}
</style>
